<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/cola.css">
	<script src="../../resources/jquery-2.1.3.js"></script>
	<script src="../../resources/cola-ui/3rd.js"></script>
	<script src="../../resources/cola-ui/semantic.js"></script>
	<script src="../../resources/cola-ui/cola.js"></script>
	<script src="../../resources/cola-ui/i18n/zh/cola.js"></script>

	<style>
		li {
			padding: 8px;
		}
	</style>

	<script type="text/javascript">
		cola(function (model) {
			model.describe("todos", {
				provider: "../../data/todos.json"
			});
			model.set("sortOptions", ["", "done", "-done", "title", "-title", "done,title"]);

			model.action({
				add: function () {
					model.get("todos").insert({
						title: model.get("newItem")
					});
					model.set("newItem", null);
				},
				delete: function (todo) {
					todo.remove();
				},
				stat: function () {
					var done = 0, total = 0;
					model.get("todos").each(function (todo) {
						total++;
						if (todo.get("done")) done++;
					});
					return done + "/" + total;
				}
			});
		});
	</script>
</head>
<body style="padding:1em;">
<p>
	<input c-bind="newItem">
	<button id="buttonAdd" c-onclick="add()" c-disabled="isEmpty(newItem)">Add</button>
</p>
<p>
	Filter: <input c-bind="filterParam">
	Sort: <select c-bind="sortParam" c-options="sortOptions"></select>
</p>
<ul>
	<li c-repeat="todo in sort(filter(todos,filterParam),sortParam)">
		<input type="checkbox" c-bind="todo.done">
		<span c-bind="todo.title"></span>
		<button c-onclick="delete(todo)">x</button>
	</li>
</ul>
<p>
	<span c-bind="stat()"></span>
</p>
</body>
</html>